<template>
	<view class="movies">
		<view class="main">
			<view class="power">
				<image src="../../static/img/lamp-btn.png" mode=""></image>
				<text>电源</text>
			</view>
			<view class="content">
			
				<view class="direction bottom"><image src="../../static/img/m-bottom.png" mode=""></image></view>
				<view class="direction top"><image src="../../static/img/m-top.png" mode=""></image></view>
				<view class="direction left"><image src="../../static/img/m-left.png" mode=""></image></view>
				<view class="direction right"><image src="../../static/img/m-right.png" mode=""></image></view>
				<image src="../../static/img/m-ok.png" mode=""></image>
			</view>
		</view>		
		<view class="btn">
			<view class="itembox">
				<view class="item">
					<image src="../../static/img/m-back.png"></image>
					<text>返回</text>
				</view>
				<view class="item">
					<image src="../../static/img/m-menu.png"></image>
					<text>菜单</text>
				</view>
			</view>
			<view class="itembox">
				<view class="item">
					<image src="../../static/img/m-audio.png"></image>
					<text>音量</text>
				</view>
				<view class="item">
					<image src="../../static/img/m-audio.png"></image>
					<text>音量</text>
				</view>
			</view>			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	.movies{
		height: 100%;
		padding-top: 150upx;	
		.main{
			height: 313upx;
			position: relative;	
			.power{
				width: 88upx;
				height: 88upx;
				position: absolute;
				right:50upx;
				top: -90upx;
				z-index: 999;
				text-align: center;
				image{
					width: 100%;
					height: 88upx;
				}
			}
			.content{
				height: 313upx;
				width: 313upx;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
				text-align: center;							
				padding-top: 90upx;
				background: url(../../static/img/movies-bg.png) no-repeat center center;
				background-size: 313upx 313upx;
				image{
					width: 132upx;
					height: 132upx;
				}
				.direction{
					position: absolute;
					z-index: 9999;
					width: 28upx;
					height: 28upx;
					image{
						width: 28upx;
						height: 28upx;
					}
				}
				.top{
					top:18upx;
					left: 146upx;
				}
				.left{
					top:138upx;
					left: 18upx;
				}
				.right{
					top:138upx;
					right: 18upx;
				}
				.bottom{
					bottom:18upx;
					left: 146upx;
				}
				
			}
		}		
		.btn{
			width: 100%;			
			padding-top: 86upx;
			.itembox{
				overflow: hidden;
				width: 100%;
				.item{
					width: 88upx;				
					float: left;
					padding-bottom: 50upx;
					margin-left: 102upx;
					text-align: center;
					image{
						width: 88upx;
						height:88upx
					}
					text{
						display: block;
						font-size: 28upx;
						color: #000;
					}
				}
				.item:nth-of-type(even){
					float: right;		
					margin-right: 102upx;				
				}
			}
			
		}
		
	}

</style>
